import React, {
	PureComponent
} from 'react';
import {
	DetailWrapper,
	DetailLeft,
	DetailRight,
	DetailHeader,
	WriterInfo,
	WriterArticle,
	Recommend,
	Content
} from './style';
import {
	connect
} from 'react-redux';

import {
	actionCreators
} from './store';

import { withRouter } from 'react-router-dom';

class Detail extends PureComponent {
	render() {
		return (
			<DetailWrapper>
				<div className = "wrapper">
					<DetailLeft>
						<DetailHeader>
							{this.props.title}
						</DetailHeader>
						<WriterInfo>
							作者信息
						</WriterInfo>
						<Content dangerouslySetInnerHTML = {{__html: this.props.content}} />
					</DetailLeft>
					<DetailRight>
						<WriterArticle>
							作者文章列表
						</WriterArticle>
						<Recommend>
							推荐阅读
						</Recommend>
					</DetailRight>
				</div>
			</DetailWrapper>
		)
	}

	componentDidMount() {
		this.props.getDetail(this.props.match.params.id);
	}

}

const mapState = (state) => ({
	title: state.getIn(['detail', 'title']),
	content: state.getIn(['detail', 'content'])
});

const mapDispatch = (dispatch) => ({
	getDetail(id) {
		dispatch(actionCreators.getDetail(id));
	}
});

export default connect(mapState, mapDispatch)(withRouter(Detail));